<template>
  <el-card class="settings-card">
    <div class="card-header">
      <span>会议设置</span>
    </div>

    <div class="setting-item">
      <label class="setting-label">默认会议设置</label>
      <el-select
        v-model="defaultSetting"
        placeholder="请选择"
        @change="handleSettingChange('defaultSetting', $event)"
      >
        <el-option label="开启摄像头和麦克风" value="open"></el-option>
        <el-option label="仅开启麦克风" value="mic"></el-option>
        <el-option label="仅开启摄像头" value="cam"></el-option>
      </el-select>
    </div>

    <div class="setting-item">
      <label class="setting-label">虚拟背景</label>
      <div class="bg-grid">
        <div
          v-for="(bg, index) in bgList"
          :key="index"
          class="bg-item"
          :style="{backgroundImage: `url(${bg})`}"
          :class="{ 'active': activeBgIndex === index }"
          @click="activeBgIndex = index"
        ></div>
        <div class="add-bg" @click="openBgDialog">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>

    <el-checkbox
      v-model="muteOnJoin"
      class="setting-checkbox"
      @change="handleSettingChange('muteOnJoin', $event)"
    >
      入会时静音
    </el-checkbox>

    <el-checkbox
      v-model="waitingRoom"
      class="setting-checkbox"
      @change="handleSettingChange('waitingRoom', $event)"
    >
      开启等候室
    </el-checkbox>

    <el-checkbox
      v-model="shareScreen"
      class="setting-checkbox"
      @change="handleSettingChange('shareScreen', $event)"
    >
      允许参会者共享屏幕
    </el-checkbox>
  </el-card>
</template>

<script>
export default {
  name: 'MeetingSettingsCard',
  data() {
    return {
      // 组件独立数据
      defaultSetting: 'open', // 本地默认设置
      bgList: [ // 本地虚拟背景列表
        'https://picsum.photos/200/150?random=1',
        'https://picsum.photos/200/150?random=2',
        'https://picsum.photos/200/150?random=3',
        'https://picsum.photos/200/150?random=4',
        'https://picsum.photos/200/150?random=5'
      ],
      activeBgIndex: 0, // 本地选中的背景索引
      muteOnJoin: false, // 本地静音设置
      waitingRoom: false, // 本地等候室设置
      shareScreen: true // 本地共享屏幕设置
    }
  },
  methods: {
    // 本地处理设置变更
    handleSettingChange(key, value) {
      this[key] = value
      console.log(`设置变更: ${key} = ${value}`) // 实际项目中可本地存储
    },
    // 本地处理背景上传
    openBgDialog() {
      this.$message.info('打开虚拟背景上传弹窗')
    }
  }
}
</script>

<style lang="less" scoped>
/* 样式保持不变，新增选中背景样式 */
.settings-card {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #ebeef5;

  .card-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    span{
      font-size: 18px;
    }
  }

  .setting-item {
    margin-bottom: 16px;

    .setting-label {
      display: block;
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .bg-grid {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .bg-item {
        width: 80px;
        height: 60px;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;

        &.active {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
      }

      .add-bg {
        width: 80px;
        height: 60px;
        border: 2px dashed #d9d9d9;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d9d9d9;
        font-size: 24px;
        cursor: pointer;
      }
    }
  }

  .setting-checkbox {
    margin-bottom: 8px;
    font-size: 14px;
  }
}
</style>
